<template>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <keep-alive>
        <component v-bind:is="currentTabComponent" class="tab"></component>
      </keep-alive>
    </div>
</template>
<script>
import Tes from './Tes'
import App from './App'
// import Socket from './components/Socket'
import VueLife from '../components/VueLife'
import TalkFramePlus from '../components/TalkFramePlus'
import ClickTalk from '../components/ClickTalk'
export default {
    data: function(){
        return {
            currentTab: "App",
            tabs: ["App", "Tes","TalkFramePlus","VueLife","ClickTalk"]
        }
    },
    computed: {
        currentTabComponent: function() {
        return this.currentTab;
        }
    },
    components:{
        Tes,
        App,
        // Socket,
        VueLife,
        TalkFramePlus,
        ClickTalk
    }
}
</script>
<style scoped>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>